<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./global.css">
</head>
<body>
    <!-- 元素选择器 -->
    <p class="classSelector">类选择器</p>
    <p id="idSelector">Id选择器</p>
    <!-- 类选择器是最常用的 -->
     <p class="purple">我希望这段是紫色的</p>
     <p class="orange">我希望这段是橙色的</p>
     <p class="yellow">我希望这段是黄色的</p>
     <!-- 虽然显示是正确的，但不要有同名ID -->
      <p id="idSelector">ID选择器</p>
      <!-- 不同元素选择器可以共享同一个类选择器的样式 -->
       <div class="yellow">div选择器</div>
       <div class="yellow">nav选择器</div>
       <div class="yellow">footer选择器</div>
       <!-- 层级关系 -->
        <div class="parent">
            <div class="child">父级中的子级可区别于同类名的其他元素</div>
        </div>
        <div class="child">同类名的其他元素</div>
        <!-- 颜色，这里介绍GB和Hex两种 -->
         <div class="rgb">用rgb表示颜色</div>
         <div class="hex">用Hex表示颜色</div>
         <!-- 颜色，可以给任何需要以颜色为值的语句 -->
          <div class="backgroud-color">背景颜色</div>
          <div class="border-color">边框颜色</div>
          <!-- 文本 -->
           <p class="text-1">text1</p>
           <p class="text-2">text1</p>
           <p class="text-3">text1</p>
           <!-- 盒子 -->
            <div class="box-model">盒子模型</div>
            <!-- 布局 -->
             <div>独占一行</div>
             <p>独占一行</p>
             <h1>独占一行</h1>

             <span>不会独占一行</span>
             <a>不会独占一行</a>
             <!-- 弹性布局 -->
              <div class="flex">
                <div class="item">项目</div>
                <div class="item">项目</div>
                <div class="item">项目</div>
              </div>
              <!-- 网格布局 -->
               <div class="grid">
                <div>网络项目</div>
                <div>网络项目</div>
                <div>网络项目</div>
                <div>网络项目</div>
                <div>网络项目</div>
                <div>网络项目</div>
                <div>网络项目</div>
               </div>
               <!-- 定位 -->
                <div class="relative"></div>
                <div class="absolute"></div>
                <div class="fixed"></div>
                <div class="static"></div>
</body>
</html>